<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>x
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>Layout</h3>
<img src="images/layout.png">

<h4>Dependencies</h4>
<ul>
	<li>panel</li>
	<li>resizable</li>
</ul>

<h4>Usage Example</h4>
<h5>Create Layout</h5>
<p>Create Layout via markup. Add 'easyui-layout' class to &lt;div/&gt; markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:600px;height:400px;"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"north"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"North&nbsp;Title"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"south"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"South&nbsp;Title"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"east"</span><span>&nbsp;</span><span class="attribute">iconCls</span><span>=</span><span class="attribute-value">"icon-reload"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"East"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"west"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"West"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"center"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"center&nbsp;title"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"padding:5px;background:#eee;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-layout" style="display: none;">	&lt;div id="cc" class="easyui-layout" style="width:600px;height:400px;"&gt;
		&lt;div region="north" title="North Title" split="true" style="height:100px;"&gt;&lt;/div&gt;
		&lt;div region="south" title="South Title" split="true" style="height:100px;"&gt;&lt;/div&gt;
		&lt;div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"&gt;&lt;/div&gt;
		&lt;div region="west" split="true" title="West" style="width:100px;"&gt;&lt;/div&gt;
		&lt;div region="center" title="center title" style="padding:5px;background:#eee;"&gt;&lt;/div&gt;
	&lt;/div&gt;
</textarea>
<p>Create layout on whole page.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">body</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"north"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"North&nbsp;Title"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"south"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"South&nbsp;Title"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"east"</span><span>&nbsp;</span><span class="attribute">iconCls</span><span>=</span><span class="attribute-value">"icon-reload"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"East"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"west"</span><span>&nbsp;</span><span class="attribute">split</span><span>=</span><span class="attribute-value">"true"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"West"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">region</span><span>=</span><span class="attribute-value">"center"</span><span>&nbsp;</span><span class="attribute">title</span><span>=</span><span class="attribute-value">"center&nbsp;title"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"padding:5px;background:#eee;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="tag">&lt;/</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-layout" style="display: none;">	&lt;body class="easyui-layout"&gt;
		&lt;div region="north" title="North Title" split="true" style="height:100px;"&gt;&lt;/div&gt;
		&lt;div region="south" title="South Title" split="true" style="height:100px;"&gt;&lt;/div&gt;
		&lt;div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"&gt;&lt;/div&gt;
		&lt;div region="west" split="true" title="West" style="width:100px;"&gt;&lt;/div&gt;
		&lt;div region="center" title="center title" style="padding:5px;background:#eee;"&gt;&lt;/div&gt;
	&lt;/body&gt;
</textarea>

<br>
<h5>Collpase Layout Panel</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).layout();&nbsp;&nbsp;</span></span></li><li class=""><span><span class="comment">//&nbsp;collapse&nbsp;the&nbsp;west&nbsp;panel</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>$(<span class="string">'#cc'</span><span>).layout(</span><span class="string">'collapse'</span><span>,</span><span class="string">'west'</span><span>);&nbsp;&nbsp;</span></span></li></ol></div><textarea class="js" name="code-layout" style="display: none;">	$('#cc').layout();
	// collapse the west panel
	$('#cc').layout('collapse','west');
</textarea>

<br>
<h5>Add west region panel with tool buttons</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).layout(</span><span class="string">'add'</span><span>,{&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;region:&nbsp;<span class="string">'west'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;180,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;<span class="string">'West&nbsp;Title'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;split:&nbsp;<span class="keyword">true</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;tools:&nbsp;[{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconCls:<span class="string">'icon-add'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:<span class="keyword">function</span><span>(){alert(</span><span class="string">'add'</span><span>)}&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;},{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconCls:<span class="string">'icon-remove'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:<span class="keyword">function</span><span>(){alert(</span><span class="string">'remove'</span><span>)}&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}]&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-layout" style="display: none;">	$('#cc').layout('add',{
		region: 'west',
		width: 180,
		title: 'West Title',
		split: true,
		tools: [{
			iconCls:'icon-add',
			handler:function(){alert('add')}
		},{
			iconCls:'icon-remove',
			handler:function(){alert('remove')}
		}]
	});
</textarea>

<p>&nbsp;</p>
<h4>Layout Panel Options</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>title</td>

<td>string</td>
<td>The layout panel title text.</td>
<td>null</td>
</tr>
<tr>
<td>region</td>
<td>string</td>
<td>Defines the layout panel position, the value is one of following: north, south, east, west, center.</td>
<td></td>
</tr>
<tr>

<td>border</td>
<td>boolean</td>
<td>True to show layout panel border.</td>
<td>true</td>
</tr>
<tr>
<td>split</td>
<td>boolean</td>
<td>True to show a split bar which user can change the panel size.</td>
<td>false</td>

</tr>
<tr>
<td>iconCls</td>
<td>string</td>
<td>An icon CSS class to show a icon on panel header.</td>
<td>null</td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td>An URL to load data from remote site.</td>

<td>null</td>
</tr>
</tbody></table>

<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>

<th><strong>Description</strong></th>
</tr>
<tr>
<td>resize</td>
<td>none</td>
<td>Set the layout size.</td>
</tr>
<tr>
<td>panel</td>
<td>region</td>
<td>Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.</td>

</tr>
<tr>
<td>collapse</td>
<td>region</td>
<td>Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.</td>
</tr>
<tr>
<td>expand</td>
<td>region</td>
<td>Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'.</td>
</tr>
<tr>
<td>add</td>
<td>options</td>
<td>
Add a specified panel, the options parameter is a config object, see tab panel properties for more details.
</td>
</tr>
<tr>
<td>remove</td>
<td>region</td>
<td>Remove the specified panel, the 'region' parameter possible values:'north','south','east','west'.</td>
</tr>

</tbody></table>

</div>	
</body>
</html>